<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<script src="https://maps.googleapis.com/maps/api/js?v=3.exp&amp;sensor=false"></script>
<script>
var rendererOptions = {
  draggable: true
};

var stockholm = new google.maps.LatLng(10.763412,106.682405);
var initstart = new google.maps.LatLng(10.763412,106.682405);
var initdest = new google.maps.LatLng(12.763412,107.682405);
	var directionsService = new google.maps.DirectionsService();
    var directionsDisplay = new google.maps.DirectionsRenderer(rendererOptions);
var marker;
var marker2;
function initialize() {
  var mapOptions = {
    zoom: 8,// muc zoom la 13
    center: stockholm// inite tai toado stockholm
  };
 
	var directionsService = new google.maps.DirectionsService();
    var directionsDisplay = new google.maps.DirectionsRenderer({suppressMarkers: true});
	map = new google.maps.Map(document.getElementById('map-canvas'),
          mapOptions);

    directionsDisplay.setMap(map); 

	marker = new google.maps.Marker({
		map:map,
		draggable:true,
		animation: google.maps.Animation.DROP,
		position: initstart
	});

	marker2 = new google.maps.Marker({
		map:map,
		draggable:true,
		animation: google.maps.Animation.DROP,
		position: initdest
	});
	google.maps.event.addListener(marker,'dragend',function() {/* Ham goi su kiem drag cua marker	var start = new google.maps.LatLng(20.694004, 77.110291);// diem start
		var end = new google.maps.LatLng(28.72082, 77.107241);//diem end
		var request = {// khai bao duong di
			origin : start,
			destination : end,
			travelMode : google.maps.TravelMode.DRIVING
		};
    directionsService.route(request, function(response, status) {// request ham tim duong di
        if (status == google.maps.DirectionsStatus.OK) {
            directionsDisplay.setDirections(response);
        }
    });*/
	
	var x= marker.getPosition();
//	alert(x);
	document.getElementById("start").value=x;
  });
}
function fx() { 
	marker.setVisible(false);
	marker2.setVisible(false);
    directionsDisplay.setMap(map);
		var request = {// khai bao duong di
			origin : marker.getPosition(),
			destination : marker2.getPosition(),
			travelMode : google.maps.TravelMode.DRIVING
		};
    directionsService.route(request, function(response, status) {// request ham tim duong di
        if (status == google.maps.DirectionsStatus.OK) {
            directionsDisplay.setDirections(response);
        }
    });
	var x= marker.getPosition();
	
	document.getElementById("start").value=x;
 
}
google.maps.event.addDomListener
(window, 'load', initialize);
</script>
</head>

<body>
<div style="width:800px;height:600px">

<div id="map-canvas" style="float:left;background-color:#09C;width:600px;height:600px"></div>
<div style="float:right;width:200px;height:600px">
<h5>Tim duoong di2</h5>
<input id="start">

<input>
<button onclick="fx()" >xxx</button>
</div>



</div>
<div style="float:right;width:200px;height:600px"></div>



</body>
</html>

